<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../docs/logo.png">
    <script src="../build/image3D.js"></script>
    <title>3D对象 | 测试</title>
    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs'>
        void main(){
            gl_Position=vec4(0.0,0.0,0.0,1.0);
            gl_PointSize=100.0;
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs'>
        void main(){
            gl_FragColor=vec4(0.0,0.0,1.0,1.0);
        }
    </script>
</head>

<body>

    <button onclick="doClear()">清空画布</button>

    <canvas width=500 height=500>非常抱歉，您的浏览器不支持canvas!</canvas>

    <script>

        // 创建3D对象并配置好画布和着色器
        var image3d = new image3D(document.getElementsByTagName('canvas')[0], {

            // 着色器是必须传递的
            "vertex-shader": document.getElementById("vs").innerText,
            "fragment-shader": document.getElementById("fs").innerText,

            // 是否开启深度计算（可选）
            "depth": true

        });

        console.log(image3d);

        var painter = image3d.Painter();

        console.log(painter.drawPoint(0, 1));

        console.log(image3d.Buffer());
        console.log(image3d.Buffer(true));

        console.log(image3d.Texture2D(0));
        console.log(image3d.TextureCube(100, 100));

        function doClear() {
            image3d.clear(1, 1, 1, 1);
        }

    </script>

</body>

</html>
